<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>与后台SSM交互</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .el-header,
        .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body>.el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>

<body>

    <el-container id="app">
        <el-aside width="200px">Aside</el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <!-- 添加表格 -->
                <el-table :data="cars" style="width: 100%" :row-class-name="tableRowClassName">
                    <el-table-column prop="id" label="序号">
                    </el-table-column>
                    <el-table-column prop="name" label="车名">
                    </el-table-column>
                    <el-table-column prop="engine" label="引擎">
                    </el-table-column>
                    <el-table-column prop="price" label="价格">
                    </el-table-column>
                    <el-table-column prop="emissionStanders" label="排放标准类型">
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>


    <script>
        axios.defaults.withCredentials=true;
        new Vue({
            el: '#app',
            data() {
                return {
                    cars: []
                }
            },
            created() {
                let _this = this;
                // 为给定 ID 的 user 创建请求
                axios.get('http://localhost:8090/car-recommand/api/car/findAllCar?token='+localStorage.getItem("user"))
                    .then(function (response) {
                        console.log(response);
                        console.log(response.data.msg);
                        _this.cars = response.data.results;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            methods: {
                tableRowClassName({ row, rowIndex }) {
                    if (rowIndex === 1) {
                        return 'warning-row';
                    } else if (rowIndex === 3) {
                        return 'success-row';
                    }
                    return '';
                }
            }
        });

    </script>
</body>

</html>